<template>
	<view class="survey">
		<view v-if="surveyErr" class="survey-err">
			<view class="err-page">{{errorMessage}}</view>
		</view>
		<view v-else>
			<view class="survey-wrapper" v-if="!showEnd">
				<view class="desription" v-show="showDesription">
					<survey-description :title="title" :desc="des" @start="()=>showDesription=false" />
				</view>

				<view v-show="!showDesription" class="survey-main">
					<view class="survey-questions">
						<view v-for="(q,index) in questions" :key="index"
							:style="{'border':errIndex.includes(q.index)? '1px solid red' : 'none','margin-top':'4rpx'}">
							<view class="question-title" :class="{'require':q.topic.required}">
								<text class="question-index">{{index+1}}.</text>
								<text>{{`${q.topic.title}`}}</text>
							</view>
							<!-- 单选题 -->
							<view v-if="q.type ==='radio'" class="question">
								<u-radio-group v-model="q.answer.name" placement="column">
									<u-radio :customStyle="{marginBottom: '8px'}"
										v-for="(item, index) in q.topic.operations" :key="index" :name="item.value"
										class="question-item">
										<view v-if="item.type ==='radio'">{{item.label}}</view>
										<view v-else>
											<u--input placeholder="输入其他" border="surround" v-model="q.answer.value" />
										</view>
									</u-radio>
								</u-radio-group>
							</view>
							<!-- 多选题 -->
							<view v-if="q.type ==='checkbox'" class="question">
								<u-checkbox-group v-model="q.answer.name" placement="column">
									<!-- 修改了u-checkbox源码，允许自定义label -->
									<u-checkbox :customStyle="{marginBottom: '8px'}"
										v-for="(item, index) in  q.topic.operations" :key="index" :name="item.value"
										class="question-item">
										<view v-if="item.type ==='checkbox'">{{item.label}}</view>
										<view v-else>
											<u--input placeholder="输入其他" border="surround" v-model="q.answer.value" />
										</view>
									</u-checkbox>
								</u-checkbox-group>
							</view>
							<!-- 填空题 -->
							<view v-if="q.type ==='textarea'">
								<uni-easyinput v-model="q.answer.value" type="textarea"
									placeholder="请输入内容"></uni-easyinput>
							</view>
						</view>
					</view>
					<!-- 提交 -->
					<view class="survey-submit">
						<u-button type="primary"
							@tap="surveyNext">{{currentPage === totalPage ? '提交' :'下一页'}}</u-button>
					</view>
				</view>
			</view>
			<view v-else class="survey-end">
				<survey-description :end="end" />
			</view>
		</view>
	</view>
</template>

/**
* u-radio、u-checkbox组件都有修改源码
*/
<script>
	import {
		survey
	} from '../../../static/js/test';

	import {
		requestGet,
		requestPost
	} from '../../../static/js/request.js';
	import {
		log,
		toast
	} from '../../../static/js/utils';
	import {
		userSign
	} from '../../../static/js/storageUtil';

	export default {
		data() {
			return {
				teamId: null,
				sign: null,
				types: ['sTitle', 'sNotice'],
				surveyErr: false,
				errorMessage: '',
				showDesription: true,
				showEnd: false,
				title: '',
				des: '',
				end: {},
				errIndex: [],
				surveyData: {},
				totalPage: -1,
				currentPage: 0,
				questions: null
			}
		},
		methods: {
			validate() {
				this.errIndex = []
				return this.questions.filter(q => {
					if (!q.topic.required) {
						return false
					}
					let {
						topic,
						type,
						answer
					} = q
					if (['radio', 'checkbox'].includes(type)) {
						if (answer.name && answer.name.length) {
							return false
						}
					}
					if (type === 'textarea' && answer.value) {
						return false
					}
					this.errIndex.push(q.index)
					toast('您有问卷未填写')
					return true
				}).length
			},
			surveyNext() {
				if (this.validate()) {
					return
				}
				if (this.currentPage === this.totalPage) {
					requestPost('/wxqy/mvb/survey/answer', {
						userUUID: userSign(),
						sign: this.sign,
						id: this.teamId,
						question: this.surveyData
					}).then(e => {
						this.showEnd = true
					})
				} else {
					this.currentPage++
					this.pageQuestions()
				}
			},
			pageQuestions() {
				this.questions = this.surveyData.filter(s => (!this.types.includes(s.type)) && s.page > -1)
					.filter(s => s.page === this.currentPage)
			},
			init(t, sign) {
				this.teamId = t
				this.sign = sign
				requestGet('/wxqy/mvb/survey/question', {
					t: t,
					sign: sign,
					u: userSign()
				}).then(e => {
					let data = e
					this.des = data.description
					this.showDesription = !!this.des
					this.title = data.title
					uni.setNavigationBarTitle({
						title: this.title
					})
					let questions = JSON.parse(data.questions)
					questions.map(q => {
						if (q.type === 'sEnd') {
							this.end = q
						}
						if (!this.types.includes(q.type)) {
							q.answer = {}
						}
						return q
					})
					this.surveyData = questions
					this.surveyData.map(s => this.totalPage = Math.max(this.totalPage, s.page))
					this.currentPage = 0
					this.pageQuestions()
				}).catch(e => {
					console.log(e)
					this.surveyErr = true
					this.errorMessage = e.data.msg
				})
			}
		},
		onLoad(options) {
			let {
				t,
				sign
			} = options
			this.init(t, sign)
		}
	}
</script>

<style lang="scss">
	.survey-end {
		flex-direction: column;
	}

	.err-page {
		background-color: #67b6f8;
		padding: 20px 10px 20px 10px;
		height: 90vh;
		width: 90vw;
		text-align: center;
		color: #fff;
	}

	.survey-err,
	.survey-end,
	.survey-wrapper {
		background-color: #3ea0ff;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.survey-wrapper {
		.survey-main {
			width: 90%;
			margin: auto;
			height: 95%;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 16rpx;
			position: relative;

			.survey-questions {
				overflow-y: auto;
				height: calc(100% - 90rpx);

				.require::before {
					content: '*';
					color: #f12323;
				}
			}

			.survey-submit {
				height: 80rpx;
				position: absolute;
				left: 10px;
				right: 10px;
				bottom: 10px;
			}
		}

		.question-title {
			padding: 0 10rpx;
			// display: flex;
			// align-items: center;
			// background-color: rgba(39, 156, 208, 0.2);
		}

		.question-index {
			padding: 8rpx 12rpx;
		}

		.question {
			margin: 10rpx 0;
			padding-left: 20rpx;

			.question-item {
				margin: 10rpx 0;
			}
		}
	}
</style>